<script setup lang="ts">
import { onMounted, getCurrentInstance, watchEffect, computed } from 'vue'
import * as echarts from 'echarts'
import { normalize } from 'echarts/types/src/scale/helper.js'

const that = getCurrentInstance()

const packData = {
  current: 1680,
  today: 1920,
  value: 1720
}

onMounted(() => {
  var myChart = echarts.init(that.refs.chart)
  var option = {
    title: {
      text: '完成率',
      x: '18px',
      textStyle: {
        color: '#c0daff',
        fontSize: 18,
        lineHeight: 30
      },
      backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        offset: 0,
        color: '#304ea6ff'
      }, {
        offset: 1,
        color: '#304ea600'
      }]),
      padding: [0, 300, 0, 20]
    },
    legend: {
      data: ['实时完成率', '当日目标量'],
    },
    xAxis: {
      show: true,
      max: Math.max(packData.today, packData.value),
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: '#edffff',
        fontSize: 14
      }
    },
    yAxis: {
      type: 'category',
      data: ['今日时时缴库量', '今日时时目标量'],
      axisLabel: {
        color: '#edffff',
        fontSize: 14
      },
    },
    grid: {
      left: '7.5%',
      right: '5%',
      top: '25%',
      bottom: '24%'
    },
    series: [
      {
        name: '',
        type: 'bar',
        label: {
          show: true,
          position: 'right',
          fontSize: 16,
          color: '#ebffff'
        },
        barGap: '-100%',
        z: -1,
        data: [packData.current, packData.today],
        color: '#5470c6'
      },
      {
        name: '当前',
        type: 'bar',
        label: {
          show: true,
          position: 'inside',
          formatter: function (data: { value: number }) {
            if (data.dataIndex == 0) {
              if (data.value < packData.current) return `{red|${data.value}(${Math.floor(data.value / packData.current * 100)}%)}`
              if (data.value > packData.current) return `{green|${data.value}(${Math.floor(data.value / packData.current * 100)}%)}`
              return `{black|${data.value}(${Math.floor(data.value / packData.current * 100)}%)}`
            }
          },
          rich: {
            red: {
              color: '#f00',
              fontSize: 16
            },
            green: {
              color: '#0f0',
              fontSize: 16
            },
            black: {
              color: '#000',
              fontSize: 16
            },
          },
        },
        data: [packData.value],
        color: '#91cc75b0'
      },
    ],
  }

  // const option = {
  //   title: {
  //     text: '完成率',
  //     x: 'center'
  //   }, tooltip: {
  //     trigger: 'item',
  //     formatter: '{a}: {b} ({d}%)'
  //   }, legend: {
  //     orient: 'vertical',
  //     y: 'bottom',
  //     x: 'right'
  //   }, series: [
  //     // 内环数据
  //     {
  //       name: '达成率',
  //       type: 'pie',
  //       radius: ['40%', '50%'],
  //       center: ['50%', '50%'],
  //       itemStyle: {
  //         normal: {
  //           color: (data: Object) => {
  //             let list = ['#ebffff', '#5470c6'];
  //             return list[data.dataIndex]
  //           }
  //         }
  //       },
  //       data: [
  //         { value: packData.value, name: '已完成' },
  //         { value: packData.current - packData.value, name: '未完成' },
  //       ]
  //     },
  //     // 外环数据
  //     {
  //       name: '外环数据',
  //       type: 'pie',
  //       radius: ['54%', '64%'],
  //       center: ['50%', '50%'],
  //       itemStyle: {
  //         normal: {
  //           color: (data: Object) => {
  //             let list = ['#5470c6', '#ebffff'];
  //             return list[data.dataIndex]
  //           }
  //         }
  //       },
  //       data: [
  //         { value: packData.current, name: '时时目标量' },
  //         { value: packData.today - packData.current, name: '' },
  //       ],
  //     }
  //   ]
  // }

  myChart.setOption(option);
})
</script>

<template>
  <v-chart class="chart" ref="chart" autoresize />
</template>

<style scoped>
.chart {
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 100% !important;
}
</style>
